<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直对齐方式</title>
    <style>
        div {
            border: 1px solid #000;
        }
        img {
            /* vertical-align: middle; */
            /* 顶对齐:最高内容的顶部 */
            /* vertical-align: top; */
            /* vertical-align: baseline; */
            /* 底对齐:最高内容的底部--去除图片的底部空表vertical-align: bottom,
             还有display: block也可以 
             原因: 因为浏览器把行内块,行内标签当做文字处理,默认按基线对齐 
             效果:图片img的底下有空白,转块级不按基线对齐,空表就消失了*/
            /* vertical-align: bottom; */
           
        }
    </style>
</head>
<body>
    <div>
    <img src="./images/1.webp"></img>
     <!-- 我是谁?我在哪? -->
    </div>
</body>
</html>